<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>服务器性能</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/demo/demo.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/highcharts.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	<!-- 中文包要放在exporting.js下面，否则无效 -->
</script>
<style type="text/css">
	.tabs-panels {
		height: 400px !important;
	}
</style>
<script type="text/javascript">
function getJsonLength(json){  
    var jsonLength=0;  
    for (var i in json) {  
        jsonLength++;  
    }  
    return jsonLength;  
}

function formatDatebox(value) {
	var datetimeType = "";
    var date =new Date(value);
    datetimeType = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
    +" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()+" "+date.getMilliseconds();
    return datetimeType;
}

function getData() {
	var startTime=$("#i1").datebox("getValue");
	var endTime=$("#i2").datebox("getValue");
	var startTimeLong = new Date(startTime.replace(new RegExp("-","gm"),"/")).getTime();
	var endTimeLong = new Date(endTime.replace(new RegExp("-","gm"),"/")).getTime();
	 if(startTimeLong-endTimeLong>0){
		 $.messager.alert("系统提示","查询开始时间"+startTime+"不能大于结束时间"+endTime+"！");
		 return;
	 }
	
	var dataObj;
	var url = "${pageContext.request.contextPath}/serverState/listHistoryUsageRate.do?startTime="+startTimeLong+"&endTime="+endTimeLong;
	var data = {
		type : 1
	};
	$.ajax({
		type : "get",
		async : false, //同步请求   
		url : url,
		data : data,
		timeout : 1000,
		success : function(dates) {
			//转为JSON对象
			dataObj = eval("(" + dates + ")");
		},
		error : function() {
			alert("获取数据失败，请稍后再试！");
		}
	});
	var length = getJsonLength(dataObj.rows);
	x_CPU_createTime = dataObj.rows[length-1].createTime;
	x_memory_createTime = dataObj.rows[length-1].createTime;
	x_harddisk_createTime = dataObj.rows[length-1].createTime;
	fillContainer1(dataObj,length);
	fillContainer2(dataObj,length);
	fillContainer3(dataObj,length);
}

Highcharts.setOptions({
	global : {
		useUTC : false
	}
});

function activeLastPointToolip(chart) {
	//设置最后新增的一个数据进行数据提示框显示
	var points = chart.series[0].points;
	chart.tooltip.refresh(points[points.length - 1]);

}
Highcharts.setOptions({
	// 所有语言文字相关配置都设置在 lang 里
	lang : {
		resetZoom : '重置',
		resetZoomTitle : '重置缩放比例'
	}
});
</script>

<script type="text/javascript">

var x_CPU_createTime;
var y_CPUUsageRate_CURRENT_QUANTITY;

function fillContainer1(dataObj,length){
	$('#container1').highcharts({
		credits : {
			enabled : false
		// 禁用版权信息
		},
		chart : {
			type : 'spline',//修改为bar可以显示柱形图
			zoomType : 'xy',
			animation : Highcharts.svg, // don't animate in old IE
			marginRight : 10,
			events : {
				load : function() {
					// set up the updating of the chart each second
					var series_CPUUsageRate_CURRENT_QUANTITY = this.series[0];
					var chart = this;
					var interval = setInterval(function() {
						var x;
						
						if(length>0){
							y_CPUUsageRate_CURRENT_QUANTITY = dataObj.rows[length-1].cpuUsageRate;
							x_CPU_createTime = dataObj.rows[length-1].createTime;
							length--;
						}else{
							chart.redraw();
							clearInterval(interval);
						}
						
						/* var currentTimeStr = currentTime
								.getFullYear()
								+ '-'
								+ (currentTime
										.getMonth() + 1)
								+ '-'
								+ currentTime.getDate()
								+ '    '
								+ currentTime
										.getHours()
								+ '：'
								+ currentTime
										.getMinutes()
								+ '：'
								+ currentTime
										.getSeconds();
						var obj = {
							"total" : 100,
							"rows" : [ {
								"dataType" : "CPUUsageRate",
								"currentTime" : currentTimeStr,
								"filesNumber" : y_CPUUsageRate_CURRENT_QUANTITY
							} ]
						};
						$("#dg").datagrid("loadData",
								obj); */

						series_CPUUsageRate_CURRENT_QUANTITY.addPoint([x_CPU_createTime,y_CPUUsageRate_CURRENT_QUANTITY], false, false, false);
						activeLastPointToolip(chart)
					}, 1);
				}
			}
		},
		title : {
			text : 'CPU使用率回放',
			style : {
				color : "#000",
				fontWeight : "bold"
			}
		},
		xAxis : {
			title : {
				text : '时间'
			},
			type : 'datetime',
			tickPixelInterval : 150
		},
		yAxis : {
			title : {
				text : 'CPU使用率（%）'
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ],
			 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
		},
		tooltip : {
			/* enabled : false, */
			formatter : function() {
				return '<b>' + this.series.name + '</b><br/>' + formatDatebox(x_CPU_createTime) + '<br/>' + y_CPUUsageRate_CURRENT_QUANTITY + "%";
			}
		},
		legend : {
			//设置打开图例
			enabled : true
		},
		exporting : {
			enabled : true
		},
		series : [ {
			name : 'CPU使用率',
			data : (function() {
				// generate an array of random data
				var data = [], i;
				for (i = -19; i <= 0; i += 1) {
					data.push({
						x : x_CPU_createTime + i * 1000,
						y : 0
					});
				}
				return data;
			}())
		} ]
	}, function(c) {
		activeLastPointToolip(c)
	});
}
</script>

<script type="text/javascript">

var x_memory_createTime;
var y_memoryUsageRate_CURRENT_QUANTITY;

function fillContainer2(dataObj,length){
	$('#container2').highcharts({
		credits : {
			enabled : false
		// 禁用版权信息
		},
		chart : {
			type : 'spline',//修改为bar可以显示柱形图
			zoomType : 'xy',
			animation : Highcharts.svg, // don't animate in old IE
			marginRight : 10,
			events : {
				load : function() {
					// set up the updating of the chart each second
					var series_memoryUsageRate_CURRENT_QUANTITY = this.series[0];
					var chart = this;
					var interval = setInterval(function() {
						var x;
						
						if(length>0){
							y_memoryUsageRate_CURRENT_QUANTITY = dataObj.rows[length-1].memoryUsageRate;
							x_memory_createTime = dataObj.rows[length-1].createTime;
							length--;
						}else{
							chart.redraw();
							clearInterval(interval);
						}
						
						/* var currentTimeStr = currentTime
								.getFullYear()
								+ '-'
								+ (currentTime
										.getMonth() + 1)
								+ '-'
								+ currentTime.getDate()
								+ '    '
								+ currentTime
										.getHours()
								+ '：'
								+ currentTime
										.getMinutes()
								+ '：'
								+ currentTime
										.getSeconds();
						var obj = {
							"total" : 100,
							"rows" : [ {
								"dataType" : "memoryUsageRate",
								"currentTime" : currentTimeStr,
								"filesNumber" : y_memoryUsageRate_CURRENT_QUANTITY
							} ]
						};
						$("#dg").datagrid("loadData",
								obj); */

						series_memoryUsageRate_CURRENT_QUANTITY.addPoint([x_memory_createTime,y_memoryUsageRate_CURRENT_QUANTITY], false, false, false);
						activeLastPointToolip(chart)
					}, 1);
				}
			}
		},
		title : {
			text : '内存使用率回放',
			style : {
				color : "#000",
				fontWeight : "bold"
			}
		},
		xAxis : {
			title : {
				text : '时间'
			},
			type : 'datetime',
			tickPixelInterval : 150
		},
		yAxis : {
			title : {
				text : '内存使用率（%）'
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ],
			 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
		},
		tooltip : {
			/* enabled : false, */
			formatter : function() {
				return '<b>'
						+ this.series.name
						+ '</b><br/>'
						+ formatDatebox(x_memory_createTime)
						+ '<br/>'
						+ y_memoryUsageRate_CURRENT_QUANTITY + "%";
			}
		},
		legend : {
			//设置打开图例
			enabled : true
		},
		exporting : {
			enabled : true
		},
		series : [ {
			name : '内存使用率',
			data : (function() {
				// generate an array of random data
				var data = [], i;
				for (i = -19; i <= 0; i += 1) {
					data.push({
						x : x_memory_createTime + i * 1000,
						y : 0
					});
				}
				return data;
			}())
		} ]
	}, function(c) {
		activeLastPointToolip(c)
	});
}
</script>

<script type="text/javascript">

var x_harddisk_createTime;
var y_harddiskUsageRate_CURRENT_QUANTITY;

function fillContainer3(dataObj,length){
	$('#container3').highcharts({
		credits : {
			enabled : false
		// 禁用版权信息
		},
		chart : {
			type : 'spline',//修改为bar可以显示柱形图
			zoomType : 'xy',
			animation : Highcharts.svg, // don't animate in old IE
			marginRight : 10,
			events : {
				load : function() {
					// set up the updating of the chart each second
					var series_harddiskUsageRate_CURRENT_QUANTITY = this.series[0];
					var chart = this;
					var interval = setInterval(function() {
						var x;
						
						if(length>0){
							y_harddiskUsageRate_CURRENT_QUANTITY = dataObj.rows[length-1].harddiskUsageRate;
							x_harddisk_createTime = dataObj.rows[length-1].createTime;
							length--;
						}else{
							chart.redraw();
							clearInterval(interval);
						}
						
						/* var currentTimeStr = currentTime
								.getFullYear()
								+ '-'
								+ (currentTime
										.getMonth() + 1)
								+ '-'
								+ currentTime.getDate()
								+ '    '
								+ currentTime
										.getHours()
								+ '：'
								+ currentTime
										.getMinutes()
								+ '：'
								+ currentTime
										.getSeconds();
						var obj = {
							"total" : 100,
							"rows" : [ {
								"dataType" : "memoryUsageRate",
								"currentTime" : currentTimeStr,
								"filesNumber" : y_harddiskUsageRate_CURRENT_QUANTITY
							} ]
						};
						$("#dg").datagrid("loadData",
								obj); */

						series_harddiskUsageRate_CURRENT_QUANTITY.addPoint([x_harddisk_createTime,y_harddiskUsageRate_CURRENT_QUANTITY], false, false, false);
						activeLastPointToolip(chart)
					}, 1000);
				}
			}
		},
		title : {
			text : '硬盘使用率回放',
			style : {
				color : "#000",
				fontWeight : "bold"
			}
		},
		xAxis : {
			title : {
				text : '时间'
			},
			type : 'datetime',
			tickPixelInterval : 150
		},
		yAxis : {
			title : {
				text : '硬盘使用率（%）'
			},
			plotLines : [ {
				value : 0,
				width : 1,
				color : '#808080'
			} ],
			 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
		},
		tooltip : {
			/* enabled : false, */
			formatter : function() {
				return '<b>' + this.series.name + '</b><br/>' + formatDatebox(x_harddisk_createTime) + '<br/>' + y_harddiskUsageRate_CURRENT_QUANTITY + "%";
			}
		},
		legend : {
			//设置打开图例
			enabled : true
		},
		exporting : {
			enabled : true
		},
		series : [ {
			name : '硬盘使用率',
			data : (function() {
				// generate an array of random data
				var data = [], i;
				for (i = -19; i <= 0; i += 1) {
					data.push({
						x : x_harddisk_createTime + i * 1000,
						y : 0
					});
				}
				return data;
			}())
		} ]
	}, function(c) {
		activeLastPointToolip(c)
	});
}
formatterDate = function (date) {
	var day = date.getDate();
	var month = (date.getMonth() + 1);
	var hor = date.getHours();
	var min = date.getMinutes();
	var sec = date.getSeconds();
	return date.getFullYear() + '-' + month + '-' + day+" "+hor+":"+min+":"+sec;
};

$(function(){
	$('#i1').datetimebox('setValue', formatterDate(new Date(new Date(new Date().toLocaleDateString()).getTime())));
	$('#i2').datetimebox('setValue', formatterDate(new Date()));
});
</script>

</head>
<body>
 	<div>
 		&nbsp;时间：&nbsp;<input type="text" id="i1" size="20" class="easyui-datetimebox" style="width:150px" />
 		&nbsp;至&nbsp;
		<input type="text" id="i2" size="20" class="easyui-datetimebox"  style="width:150px" />
 		<a href="javascript:getData()" class="easyui-linkbutton" iconCls="icon-search" plain="true"><b style="font-size:15px">搜索</b></a>
 	</div>
 	
	<div class="easyui-tabs" data-options="fit:true,plain:true">
		<div title="CPU使用率" style="padding:10px;"><div id="container1" style="min-width:100%;height:400px"></div></div>
		<div title="内存使用率" style="padding:10px;"><div id="container2" style="min-width:100%;height:400px"></div></div>
		<div title="硬盘使用率" style="padding:10px;"><div id="container3" style="min-width:100%;height:400px"></div></div>
	</div>

</body>
</html>